<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form  @keyup.enter.native="searchQuery" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
        <a-row :gutter="24">
          <template >
            <a-col :xl="8" :lg="8" :md="8" :sm="24">
              <a-form-item label="时间范围">
                <a-range-picker v-model="dateRange"
                                format="YYYY-MM-DD"
                                style='max-width: 360px'
                                :disabledDate='disabledDate'
                                :placeholder="['开始时间', '结束时间']" />
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="8" :md="8" :sm="24">
              <a-form-item label="信访形式">
                <a-select default-value="00" v-model="xfxs">
                  <a-select-option value="00">
                    全部
                  </a-select-option>
                  <a-select-option value="04">
                    来电
                  </a-select-option>
                  <a-select-option value="02">
                    来访
                  </a-select-option>
                  <a-select-option value="01">
                    来信
                  </a-select-option>
                  <a-select-option value="03">
                    网上信访
                  </a-select-option>
                  <a-select-option value="06">
                    领导信箱
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="8" :md="8" :sm="24">
              <a-form-item label="大区域">
                <a-select  v-model="isCenter" >
                  <a-select-option value="1">
                    市中心
                  </a-select-option>
                  <a-select-option value="0">
                    全大市
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :xl="8" :lg="8" :md="8" :sm="24">
              <a-form-item label="问题属地">
                <a-cascader
                  :options="options"
                  :load-data="loadCascadeData"
                  placeholder="默认宁波市"
                  change-on-select
                  style='max-width: 360px'
                  @change="onChange"
                />
              </a-form-item>
            </a-col>

            <a-col :xl="6" :lg="8" :md="8" :sm="24">
              <a-form-item label="去向区县">
                <a-select v-model="xzqh"  :allowClear='true'    placeholder="请选择">
                  <a-select-option v-for="item in areaOptions" :key="item.value" :value="item.value">
                    {{item.label}}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>


            <a-col :xl="6" :lg="8" :md="8" :sm="24">
              <a-form-item label="去向部门">
                <div>
                  <j-tree-dict ref='departTree' parentCode='B03' field="title" :async="true"/>
                </div>
              </a-form-item>
            </a-col>




          </template>
          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
            <a-col :xl="8" :lg="8" :md="8" :sm="24">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <!--              <a-button type="primary"  style="margin-left: 8px">保存查询结果</a-button>-->
              <!--              <a @click="handleToggleSearch" style="margin-left: 8px">-->
              <!--                {{ toggleSearchStatus ? '收起' : '展开' }}-->
              <!--                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>-->
              <!--              </a>-->
            </a-col>
          </span>
        </a-row>
      </a-form>
      <div class="table-operator">
        <!--      <a-button  type="primary" icon="bar-chart" @click='temporaryStatistics'>临时统计</a-button>-->
        <a-button v-if="ipagination.total"  type="primary" icon="save" @click='savaSearchResult' :disabled="flag">保存</a-button>
      </div>

      <a-row>
        <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
          <a-spin tip="正在保存中..." :spinning="saveLoading">
            <a-table
              :row-key="record => record.xfjbh"
              ref="table"
              size="middle"
              bordered
              :scroll="{ x: 1800}"
              :columns="columns"
              :dataSource="dataSource"
              :pagination="ipagination"
              @change="handleTableChange"
              :loading="loading"
            >
            </a-table>
          </a-spin>
        </a-col>
        <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
          <temporary-statistics-list title="统计情况" :object="statistics"/>
        </a-col>
      </a-row>



    </div>
  </a-card>

</template>

<script>
import JTreeDict from '@comp/jeecg/JTreeDict'
import HandleTemporaryService from '@/myService/HandleTemporaryService'
import moment from 'moment'
import NBAreDict from '@views/data-governance/smart-reports/handle-monthly/components/NBAreDict'
import TemporaryStatisticsList
  from '@views/data-governance/smart-reports/handle-monthly/components/TemporaryStatisticsList'

export default {
  name: 'TemporaryStatistics',
  components:{
    components: {JTreeDict},
    TemporaryStatisticsList,
  },
  data(){
    return{
      flag:false,
      saveLoading:false,
      dateRange:[moment((new Date).getTime()-24*60*60*1000*15).format("YYYY-MM-DD"),moment(new Date()).format("YYYY-MM-DD")],
      statistics:{},
      areaOptions:NBAreDict.area,
      options: [
        {
          value: '市辖区',
          label: '市辖区',
          isLeaf: false,
        },
        {
          value: '海曙区',
          label: '海曙区',
          isLeaf: false,
        },
        {
          value: '江北区',
          label: '江北区',
          isLeaf: false,
        },
        {
          value: '北仑区',
          label: '北仑区',
          isLeaf: false,
        },
        {
          value: '镇海区',
          label: '镇海区',
          isLeaf: false,
        },
        {
          value: '鄞州区',
          label: '鄞州区',
          isLeaf: false,
        },
        {
          value: '象山县',
          label: '象山县',
          isLeaf: false,
        },
        {
          value: '宁海县',
          label: '宁海县',
          isLeaf: false,
        },
        {
          value: '大榭开发区',
          label: '大榭开发区',
          isLeaf: false,
        },
        {
          value: '杭州湾',
          label: '前湾新区',
          isLeaf: false,
        },
        {
          value: '高新区',
          label: '高新区',
          isLeaf: false,
        },
      ],
      xfxs:'00',
      xzqh:undefined,
      isCenter:'0',
      problemTerritory:'',
      queryData:{
        beginDate:'',
        endDate:'',
        xfxs:'',
        xzqh:'',
        isCenter:'',
        problemTerritory: '',
        department:'',
        pageIndex:1,
        pageSize:10
      },
      /* 数据源 */
      dataSource:[],
      /* 分页参数 */
      ipagination:{
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 80,
          align: 'center',
          customRender: (text, row, index) => <span>{this.ipagination.pageSize * (this.ipagination.current - 1) + index + 1}</span>
        },
        {
          title: '信访事项编号',
          align:'center',
          width: 150,
          dataIndex: 'xfjbh',
          ellipsis: true,
        },
        {
          title: '是否流转',
          width: 80,
          dataIndex: 'sflz',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '评价情况',
          dataIndex: 'pjqk',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '姓名',
          align:'center',
          dataIndex: 'xm',
          ellipsis: true,
        },
        {
          title: '问题属地',
          dataIndex: 'wtsd',
          ellipsis: true,
        },
        {
          title: '去向单位',
          width: 150,
          align: "center",
          dataIndex: 'qxdw',
          ellipsis: true,
        },
        {
          title: '内容分类',
          align:'center',
          dataIndex: 'nrfl',
          ellipsis: true,
        },
        {
          title: '初重件',
          align:'center',
          dataIndex: 'scxfbz',
          ellipsis: true,
          customRender: (text, row, index) => <span>{row.scxfbz===1?'初件':'重件'}</span>
        },
        {
          title: '单位满意度',
          align:'center',
          dataIndex: 'zrdwmyd',
          ellipsis: true,
        },
        {
          title: '登记时间',
          align:'center',
          dataIndex: 'djsj',
          ellipsis: true,
          width: 150,
        },
        {
          title: '反应内容',
          dataIndex: 'fynr',
          ellipsis: true,
        },
        {
          title: '登记单位',
          align:'center',
          dataIndex: 'djdw',
          ellipsis: true,
        },
        // {
        //   title: '登记人',
        //   align:'center',
        //   dataIndex: 'djr',
        //   ellipsis: true,
        // },
        {
          title: '来电号码',
          align:'center',
          dataIndex: 'ldhm',
          ellipsis: true,
        },
        {
          title: '信访形式',
          align:'center',
          dataIndex: 'xfxs',
          ellipsis: true,
        },
        {
          title: '答复内容',
          dataIndex: 'clqk',
          ellipsis: true,
        },
        // {
        //   title: '数据来源',
        //   dataIndex: 'sjly',
        //   align: 'center',
        //   ellipsis: true,
        // },
        {
          title: '信访目的',
          width: 80,
          dataIndex: 'xfmd',
          align: 'center',
          ellipsis: true,
        },
      ],
      /* table加载状态 */
      loading:false,
      // 加载数据方法 必须为 Promise 对象
      downLoading:false
    }
  },
  methods:{
    onChange(val) {
      if(val.length>0){
        this.problemTerritory=val[val.length-1]
      }
      else {
        this.problemTerritory=''
      }
    },
    loadCascadeData(selectedOptions) {
      const targetOption = selectedOptions[selectedOptions.length - 1];
      targetOption.loading = true;
      let params={area:targetOption.value }
      HandleTemporaryService.getProblemTerritory(params).then(res=>{
        if(res.success){
          targetOption.children=res.result
          this.options=[...this.options];
        }
      }).finally(()=>{
        targetOption.loading = false;
      })
    },
    searchQuery(){
      if(this.dateRange.length<=0 ){
        this.$message.error("时间范围不可为空")
        return;
      }
      this.queryData.beginDate=moment(this.dateRange[0]).format("YYYY-MM-DD");
      this.queryData.endDate=moment(this.dateRange[1]).format("YYYY-MM-DD");
      this.queryData.xfxs=this.xfxs;
      this.queryData.problemTerritory=this.problemTerritory;
      this.queryData.isCenter=this.isCenter;
      this.queryData.department= this.$refs.departTree.treeValue==null ? '' : this.$refs.departTree.treeValue.label;
      this.queryData.xzqh=this.xzqh;
      console.log(this.queryData)
      this.ipagination.total=0;
      this.ipagination.current=1;
      this.flag=false;
      this.loadData();
      this.statistics={};
      HandleTemporaryService.getPretreatmentStatistics(this.queryData).then(res=>{
        if(res.success){
          this.statistics=res.result.records || res.result;
        }
      })
    },
    loadData(){
      this.loading=true;
      this.queryData.pageIndex=this.ipagination.current;
      this.queryData.pageSize=this.ipagination.pageSize;
      this.dataSource=[];
      HandleTemporaryService.getTemporaryOrderInfo(this.queryData).then(res=>{
        if (res.success) {
          this.dataSource = res.result.records || res.result;
          this.ipagination.total=res.result.total;
        }
        else {
          console.log(res)
          this.$message.info("暂无数据")
        }
      }).finally(()=>{
        this.loading=false;
      })
    },
    handleTableChange(pagination){
      this.ipagination.current = pagination.current;
      this.ipagination.pageSize = pagination.pageSize;
      this.loadData();
    },
    disabledDate(current){
      return current && (current > moment().endOf('day') || current < moment().subtract(14, "month"));
    },
    savaSearchResult(){
      this.flag=true;
      this.saveLoading=true;
      let query=Object.assign({},this.statistics,this.queryData);
      console.log(query);
      HandleTemporaryService.savaSearchResult(query).then(res=>{
        if(res.success){
          this.$message.success("已提交后台保存")
        }else{
          this.$message.warning("保存失败")
        }

      })
      this.saveLoading=false;
    }
  }
}
</script>

<style scoped>

</style>